<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>伪类选择器</title>
		<style type="text/css">
			/*
			 link 默认，未访问的状态
			 visited 已访问
			 hover 鼠标悬停
			 active 点击时的激活状态
			 * */
			a:hover{
				color: red;
			}
			a:link{
				color: gray;
			}
			a:visited{
				color: blue;
			}
			a:active{
				color: orange;
			}
			/*焦距状态*/
			input:focus{
				/*描边*/
				outline-color:green ;
				
			}
			/*选中状态*/
			input:checked{
				width: 40px;
				color: red;
			}
			input:checked+label{
				color: red;
			}
			/*
			 伪类中child系列
			 选择器:第几个儿子
			 nth里面的括号要传入从已开始的值，可结合未知数n来使用
			 2n可选择偶数，2n-1选择奇数
			 * */
			/*选择第一个元素*/
			ul li:first-child{
				color: red;
			}
			/*选择第二个元素*/
			ul li:last-child{
				color: green;
			}
			/*选择第几个*/
			ul li:nth-child(2){
				color: blue;
			}
			/*选择倒数第几个*/
			ul li:nth-last-child(3){
				color: yellow;
			}
			/*选择除了第几个以外的*/
			ul li:not(:nth-child(3)){
				color: blue;
			}
			ol li:first-of-type{
				
			}
			ol li:last-of-type{
				
				}
				ol li:nth-of-type(2){
					color: red;
					}
				ol li:nth-last-of-type(){
					
				}
				ol div:only-of-type{
					
					}
					
		</style>
	</head>
	<body>
		<!--
			类 class
		-->
		<!--伪类:1.交互效果 2.选择第n个元素-->
		<a href="http://www.baidu.com" target="_blank">点我有惊喜</a>
		<input  type="text"/>
		<!--勾选checkbox 让label也切换样式-->
		<input type="checkbox" id="check"/><label for="check">选中</label>
		<ul>
			<li>li1</li>
			<div>dasd</div>
			<li>li2</li>
			<li>li3</li>
			<li>li4</li>
			<li>li5</li>
		</ul>
		<ol>
			<li>li01</li>
			<div>das</div>
			<li>li02</li>
			<li>li03</li>
			<li>li04</li>
			<li>li05</li>
		</ol>
		<!--
			child :第n个儿子和同样类型的才能匹配
			type：匹配类型的第n个
		-->
	</body>
</html>
